<template>
	<view class="container">
		<view class="msg-group">
			<view class="msg-item" v-for="(item,key) in msgList" :key="key" :class="item.is_read > 0? 'has-read' : ''" @click="read(item, key)">
				<view class='msg-item-icon'>
					<image mode="aspectFill" :src="item.is_read ? '/static/images/msg-readed.png' : '/static/images/msg.png'"></image>
				</view>
				<view class='msg-item-content'>
					<view class="content-top">{{item.title}}</view>
					<view class="content-middle">
						<rich-text :nodes="item.content"></rich-text>
					</view>
					<view class="content-bottom">{{item.create_time}}</view>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				msgList: [],
				loadStatus: 'noMore',
				pageInfo: {
					page: 1,	// 当前页
					limit: 10, // 每页显示数量
				}
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				let data = {
					page: this.pageInfo.page,
					per_page: this.pageInfo.limit
				}
				let _this = this
				this.loadStatus = 'loading'
				this.$api.messageList(data, res => {
					if(res.code === 1) {
						console.log(res)
						let list = res.data.data || [];
						_this.msgList = [..._this.msgList, ...list]
						
						if(parseInt(res.data.current_page) < res.data.last_page) {
							_this.pageInfo.page++
							_this.loadStatus = 'more'
						} else {
							_this.loadStatus = 'noMore'
						}
					}
				})
			},
			// 点击已读
			read(item, index) {
				if(item.is_read > 0) {
					return;
				}
				let data = {
					id: item.id
				}
				let _this = this
				
				this.$api.messageRead(data, res => {
					if(res.code === 1) {
						_this.msgList[index].is_read = 1
					} else {
						_this.$common.errorToShow(res.msg)
					}
				})
			}
		},
		// 页面下拉到底部触发
		onReachBottom () {
			if (this.loadStatus == 'more') {
				this.loadData()
			}
		}
	}
</script>


<style lang="scss">
.item-title {
	font-size: $font-lg + 4upx;
	font-weight: bold;
	margin: 48rpx 44rpx;
}
.bod-t {
	border-top: 2rpx solid #E5E5E5;
}
.has-read {
	-webkit-filter: grayscale(1); /* Chrome, Safari, Opera */
	filter: grayscale(1);
	.msg-item-content {
		.content-top,.content-bottom {
			color: #959595 !important;
		}
	}
}
.msg-group {
	margin-top: 20rpx;
	.msg-item {
		padding: 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		.msg-item-icon {
			image {
				width: 1.35rem;
				height: 1rem;
			}
		}
		.msg-item-content {
			/deep/ hr { width: 300rpx;}
			padding-left: 24rpx;
			display: flex;
			flex-direction: column;
			.content-top {
				font-family: Poppins;
				font-weight: bold;
				font-size: $font-base;
				color: #223263;
				letter-spacing: 1rpx;
				margin-bottom: 16rpx;
				line-height: 150%;
			}
			.content-middle {
				rich-text{
					font-family: Poppins;
					font-size: $font-sm;
					letter-spacing: 1rpx;
					color: #9098B1;
					margin-bottom: 16rpx;
					line-height: 180%;
				}
				margin-bottom: 20rpx;
			}
			.content-bottom {
				font-family: Poppins;
				font-size: $font-sm + 2upx;
				letter-spacing: 1rpx;
				color: #223263;
				line-height: 150%;
			}
		}
	}
}
</style>
